<template>
  <!-- 首页最新 -->
  <div id="baiduHot">
    <el-card :body-style="{ padding: '10px',margin:'0px' }">
      <div class="baiduHot-item-box" v-if="news.length > 0">
        <el-row v-for="item in news" :key="item.id" style="width: auto;margin-bottom: 5px;">
          <el-card :body-style="{ padding: '5px',margin:'0px',height:'135px' }">
            <el-col :span="6" class="hot-left">
              <el-image :src="item.img" class="img"></el-image>
            </el-col>
            <el-col :span="16" class="hot-right">
              <div class="hot-right-box">
                <el-link class="title" :underline="false" :href="item.url" target="_blank">{{ item.title }}</el-link>
                <div class="content">{{ item.content }}</div>
              </div>
            </el-col>
          </el-card>
        </el-row>
      </div>
      <div v-else>
        <el-card :body-style="{ padding: '10px',margin:'10px',height:'650px' }">
          <el-empty description="暂无数据"></el-empty>
        </el-card>
      </div>
    </el-card>

  </div>
</template>

<script>
import {
    newsHotList
} from '@/api/third'

export default {
    name: 'my-baiduHot',
    data () {
        return {
            news: []
        }
    },
    filters: {
        formatTimer: function (value) {
            let date = new Date(value)
            let year = date.getFullYear()

            let month = date.getMonth() + 1
            month = month < 10 ? '0' + month : month

            let day = date.getDate()
            day = day < 10 ? '0' + day : day

            let hour = date.getHours()
            hour = hour < 10 ? '0' + hour : hour

            let minute = date.getMinutes()
            minute = minute < 10 ? '0' + minute : minute

            let second = date.getSeconds()
            second = second < 10 ? '0' + second : second

            console.log(year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second)
            return year + '-' + month + '-' + day
        }
    },
    methods: {},
    mounted () {
        newsHotList().then((response) => {
            if (response.code === 200) {
                this.news = response.data
            }
        })
    },
    created () {
    }
}
</script>

<style scoped>
/* 最外层div id选择器 */
#baiduHot {
  width: 100%;
  height: auto;
  margin-top: 0px;
}

.baiduHot-item-box {
  width: 100%;
  height: auto;
  margin-top: 0px;
  margin-bottom: 10px;
}

.hot-left {
  width: 199.5px;
  height: 134.28px;
}

.img {
  border-radius: 4px;
  width: 199.5px;
  height: 134.28px;
}

.hot-right {
  height: 134.28px;
  margin: 0px 20px 0px 20px;
}

.hot-right-box {
  width: auto;
  height: 134.28px;
  display: flex;
  flex-direction: column;
}

.title {
  font-size: 18px;
  font-weight: 600;
  height: 30px;
  line-height: 25px;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.content {
  font-size: 16px;
  height: 100px;
  line-height: 30px;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.more {
  text-align: left;
  color: blue;
  font-size: 16px;
  height: 34.27px;
  line-height: 34.27px;
}
</style>
